<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/src/css/swiper-bundle.min.css" />
  </head>
  <body>
    <style>
      body,
      html {
        margin: 0;
      }

      .swiper-container {
        width: 600px;
        height: 300px;
        margin: 50px auto;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        position: relative;
        background-color: skyblue;
      }

      .swiper-slide:nth-child(2n){
        background-color: pink;
      }

      .swiper-slide:nth-child(3n){
        background-color: tomato;
      }


    </style>

    <div class="swiper-container">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">1</div>
          <div class="swiper-slide">2</div>
          <div class="swiper-slide">3</div>
          <div class="swiper-slide">4</div>
          <div class="swiper-slide">5</div>
          <div class="swiper-slide">6</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <script src="/src/js/swiper-bundle.min.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper", {
        direction: "horizontal",
        loop: true, // 循环模式选项
        slidesPerView : 3,  
        slidesPerGroup : 3,

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

      });
    </script>
  </body>
</html>
